<template>
  <Modal
    :visible="visible"
    :title="`Certificate Details - ${nftIndex}`"
    :centered="true"
    width="375px"
    :footer="false"
    :closeIcon="renderCloseIcon()"
    @cancel="$emit('close')"
  >
    <div class="nft-details" v-show="policyDetailsShow">
      <div class="nft-details-items">
        <div class="nft-details-key">Protection For</div>
        <div class="nft-details-v">{{ poolName }}</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Liquidity</div>
        <div class="nft-details-v">{{ liquidity }} USDT</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Withdrawable Amount</div>
        <div class="nft-details-v">{{ withdrawAmount }} USDT</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Claimable Premium</div>
        <div class="nft-details-v">{{ reward }} USDT</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Claimable Mining Rewards</div>
        <div class="nft-details-v">0 USDT</div>
      </div>
    </div>

    <div class="handle-buttons-container" v-show="policyDetailsShow">
      <Button class="handle-button-ant" type="primary" @click="doTakeRewards()"
        >Take Rewards</Button
      >
      <Button class="handle-button-ant" type="primary" @click="applyForClaim()"
        >Transfer</Button
      >
      <Button
        class="handle-button-ant"
        type="primary"
        @click="doRemoveLiquidity()"
        >Remove Liquidity</Button
      >
    </div>

    <!-- claim sheet from here -->

    <div class="nft-details claim-sheet" v-show="claimSheetShow">
      <div class="nft-details-items">
        <div class="nft-details-key">Transfer to</div>
        <div class="nft-details-v">
          <input
            v-model="transferToAddress"
            type="text"
            oninput="value=value.replace(/[g-wyzG-WYZ]/g,'')"
            maxlength="42"
          />
        </div>
      </div>

      <div class="transfer-explain">
        <span class="alarm">Alarm:</span>Once you transfer your certificate Nft
        to another address,Meta Defender protocol will automotically caculate
        the premium rewards and mining rewards which belongs to you and have
        them paid into your account. Which means this part of rewards wont be
        tranfered together to the Nft recipient.
      </div>
    </div>

    <div class="handle-buttons-container" v-show="claimSheetShow">
      <Button
        class="handle-button-ant"
        type="primary"
        @click="doTransferCertificate()"
        >Transfer</Button
      >
      <Button class="handle-button-ant" type="primary" @click="backToDetails()"
        >Back</Button
      >
    </div>
  </Modal>
</template>

<script>
import store from "../../vuex/store";
import { message, Modal, Button } from "ant-design-vue";
import CloseIcon from "@/assets/close-icon.svg";

export default {
  components: {
    Modal,
    Button,
  },
  props: [
    "content",
    "visible",
    "nftIndex",
    "liquidity",
    "reward",
    "poolName",
    "poolAddress",
    "policyIndex",
  ],
  data() {
    return {
      policyDetailsShow: true,
      claimSheetShow: false,
      handleNfts: "handle-nfts",
      transferToAddress: "",
    };
  },
  computed: {
    withdrawAmount() {
      return store.state.web3Data.withdrawAmount;
    },
  },
  methods: {
    renderCloseIcon() {
      return <img src={CloseIcon} alt="" />;
    },
    applyForClaim() {
      this.policyDetailsShow = false;
      this.claimSheetShow = true;
      this.handleNfts = "handle-nfts-nobackground";
    },
    backToDetails() {
      this.policyDetailsShow = true;
      this.claimSheetShow = false;
      this.handleNfts = "handle-nfts";
    },
    async doTakeRewards() {
      let poolAddress = this.poolAddress;
      let certificateId = this.nftIndex;
      console.log(poolAddress, certificateId);
      await store.dispatch("takeRewards", { poolAddress, certificateId });
    },
    async doRemoveLiquidity() {
      let poolAddress = this.poolAddress;
      let certificateId = this.nftIndex;
      console.log(poolAddress, certificateId);
      await store.dispatch("removeLiquidity", { poolAddress, certificateId });
    },
    async doTransferCertificate() {
      if (this.transferToAddress == "") {
        message.error(
          "Please enter the address which will receive this certificate."
        );
      } else {
        var currentAddress;
        currentAddress = store.state.web3Utils.currentAddressComp;

        let poolAddress = this.poolAddress;
        let to = this.transferToAddress;
        let certificateId = this.nftIndex;
        console.log(to, certificateId, "dd443553");
        await store
          .dispatch("transferCertificate", {
            poolAddress: poolAddress,
            from: currentAddress,
            to: to,
            certificateId: certificateId,
          })
          .then(
            (result) => {
              if (result == "Transferring certificate failed") {
                console.log(result);
              } else {
                store.state.web3Data.certificateArr.splice(this.policyIndex, 1);
                this.$emit("close");
              }
            },
            (err) => {
              console.log(err);
            }
          );
      }
    },
  },
};
</script>

<style lang='less' scoped>
.withdraw-liq > div {
  line-height: 25px;
}

.transfer-explain {
  border: 1px solid #1649ff;
  border-radius: 10px;
  margin-top: 30px;
  padding: 2%;
  color: #a0a9bd;
  font-size: 16px;
  line-height: 25px;
}

.alarm {
  font-weight: 800;
  color: red;
}
</style>